<template>
  <page-header-wrapper>
    <a-card :bordered="false">
        <a-descriptions bordered>
          <a-descriptions-item label="用户名">
            {{ userInfo.username }}
          </a-descriptions-item>
          <a-descriptions-item label="密码" :span="2">
            ****** <a type="primary" style="margin-left: 30px" @click="passwordChange">修改</a>
          </a-descriptions-item>
          <a-descriptions-item label="员工姓名">
            {{ userInfo.name }}
          </a-descriptions-item>
          <a-descriptions-item label="性别">
            {{ userInfo.sex === 0 ? '男' : '女' }}
          </a-descriptions-item>
          <a-descriptions-item label="身份证">
            {{ userInfo.idCard }}
          </a-descriptions-item>
          <a-descriptions-item label="出生日期">
            {{ userInfo.birthDate }}
          </a-descriptions-item>
          <a-descriptions-item label="手机号">
            {{ userInfo.mobile }}
          </a-descriptions-item>
          <a-descriptions-item label="邮箱">
            {{ userInfo.email }}
          </a-descriptions-item>
          <a-descriptions-item label="部门">
            {{ userInfo.department }}
          </a-descriptions-item>
          <a-descriptions-item label="岗位">
            {{ userInfo.jobs }}
          </a-descriptions-item>
          <a-descriptions-item label="喜好">
            {{ userInfo.hobbies }}
          </a-descriptions-item>
          <a-descriptions-item label="入职日期">
            {{ userInfo.entryDate }}
          </a-descriptions-item>
          <a-descriptions-item label="离职日期" :span="2">
            {{ userInfo.departureDate }}
          </a-descriptions-item>
          <a-descriptions-item label="紧急联系人">
            {{ userInfo.emergencyContact }}
          </a-descriptions-item>
          <a-descriptions-item label="紧急联系人方式" :span="2">
            {{ userInfo.emergencyContactWay }}
          </a-descriptions-item>
          <a-descriptions-item label="配偶姓名">
            {{ userInfo.spouseName }}
          </a-descriptions-item>
          <a-descriptions-item label="配偶联系方式" :span="2">
            {{ userInfo.spouseContactWay }}
          </a-descriptions-item>
          <a-descriptions-item label="父亲姓名">
            {{ userInfo.fatherName }}
          </a-descriptions-item>
          <a-descriptions-item label="父亲联系方式" :span="2">
            {{ userInfo.fatherContactWay }}
          </a-descriptions-item>
          <a-descriptions-item label="母亲姓名">
            {{ userInfo.motherName }}
          </a-descriptions-item>
          <a-descriptions-item label="母亲联系方式" :span="2">
            {{ userInfo.motherContactWay }}
          </a-descriptions-item>
          <a-descriptions-item label="备注">
            {{ userInfo.note }}
          </a-descriptions-item>
        </a-descriptions>
        <edit-form
          ref="editModal"
          :visible="visible"
          :loading="confirmLoading"
          @cancel="handleCancel"
          @ok="handleOk" />
    </a-card>
  </page-header-wrapper>

</template>

<script>
import EditForm from './modules/EditForm'
import { getstaffInfo, updateStaffPassword } from '@/api/manage'

export default {
  components: {
    EditForm
  },
  data () {
    return {
      userInfo: {},
      visible: false,
      confirmLoading: false
    }
  },
  computed: {

  },
  created () {
    if (this.$router.options.routes[3].children.length < 1) {
      location.reload()
    }
  },
  mounted () {
    const userId = window.localStorage.getItem('userId')
    getstaffInfo(userId).then(res => {
      this.userInfo = res.data
    })
  },
  methods: {
    handleOk () {
      const form = this.$refs.editModal.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          // 新增
          updateStaffPassword(
            Object.assign({}, values)
          ).then(res => {
            if (res.code === 0) {
              form.resetFields()
              this.confirmLoading = false
              this.visible = false
              this.$message.info('修改密码成功')
            }
          })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.visible = false
      const form = this.$refs.editModal.form
      form.resetFields() // 清理表单数据（可不做）
    },
    passwordChange () {
      const form = this.$refs.editModal.form
      form.resetFields() // 清理表单数据（可不做）
      this.visible = true
    }
  }
}
</script>
